<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模态框</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        body {
            background-color: #ccc;
        }

        a {
            display: block;
            width: 50px;
            height: 30px;
            line-height: 30px;
            text-decoration: none;
            color: white;
            background-color: orange;
            border-radius: 5px;
            text-align: center;
            font-size: 14px;
        }

        .login {
            position: fixed;
            display: none;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 450px;
            height: 250px;
            /* border: 1px solid grey; */
            border-radius: 10px;
            background-color: #fff;
            text-align: center;
            cursor: move;
        }

        #password {
            margin: 20px 0;
        }

        input {
            outline: 0;
        }

        #regBtn,
        #loginBtn {
            border: 0;
            background-color: rgb(7, 199, 7);
            border-radius: 5px;
            color: rgba(0, 0, 0, .7);
            width: 50px;
            height: 25px;
            cursor: pointer;
        }

        #loginBtn:hover {
            transform: scale(1.1);
        }

        #regBtn {
            background-color: rgb(41, 204, 245);
            margin-left: 8px;
        }

        #regBtn:hover {
            transform: scale(1.1);
        }

        .cross {
            position: absolute;
            top: 3px;
            right: 3px;
            width: 20px;
            height: 20px;
            line-height: 20px;
            background-color: rgba(0, 0, 0, .15);
            border-radius: 10px;
            cursor: pointer;
            color: #fff;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <a href="javascript:;">登录</a>
    <div class="login">
        <h3>登录页</h3>
        <!-- <form action="http://106.15.11.51/JS%E5%AD%A6%E4%B9%A0/test2.php" method="GET"> -->
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" placeholder="请输入用户名"><br>
        <label for="password">密&nbsp;&nbsp;&nbsp;码：</label>
        <input type="password" id="password" name="password" placeholder="请输入密码"><br>
        <input type="submit" value="登录" id='loginBtn'>
        <input type="button" value="注册" id='regBtn'>
        <!-- </form> -->
        <span class="cross">X</span>
    </div>
    <script>
        var a = document.querySelector('a');
        var close = document.querySelector('.cross');
        var loginBtn = document.querySelector('#loginBtn');
        a.onclick = function () {
            a.nextElementSibling.style.display = 'block';
        };
        close.onclick = function () {
            close.parentNode.style.display = 'none';
        };
        close.parentNode.onmousedown = function (event) {
            var x = event.clientX - this.offsetLeft;
            var y = event.clientY - this.offsetTop;
            this.onmousemove = function (e) {
                this.style.left = e.clientX - x + 'px';
                this.style.top = e.clientY - y + 'px';
            }
        };
        document.onmouseup = function () {
            console.log(111);
            close.parentNode.onmousemove = null;
        };
        // 禁止选中事件
        window.onselectstart = function (e) {
            e.preventDefault();
        };
        loginBtn.onclick = function () {
            var username = window.username.value;
            var password = window.password.value;
            if (username == '' || password == '') {
                alert('用户名和密码不能为空！');
            } else {
                $.ajax({
                    type: 'get',
                    url: 'http://8.129.235.230//JS%E5%AD%A6%E4%B9%A0/test2.php',
                    data: {
                        username: username,
                        password: password
                    },
                    success: function (data) {
                        data = JSON.parse(data);
                        console.log(data);
                        alert(data);
                    },
                    error: function (res) {
                        console.log(res);
                    }
                })
            }
        };
    </script>
</body>

</html>